<template>
    <div class="container">
     <div class="error-message">
         <h1>403 Forbidden</h1>
         <p>这里暂时不对你开放哦.....</p>
     </div>
     <div class="character">
         
         <img src="../../../public/img/wjk.png" alt="可爱的角色">
     </div>
     <div class="navigation">
         <a href="/">返回首页</a>
         <a href="/login">返回登录</a>
     </div>
 </div>
</template>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f8; /* 浅蓝色背景 */
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
    }

    .container {
        text-align: center;
        padding: 20px;
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        width: 300px; /* 可根据需要调整 */
    }

    .error-message {
        margin-bottom: 20px;
    }

        .error-message h1 {
            color: #ff5722; /* 橙色，用于强调错误 */
            margin: 0 0 10px;
        }

        .error-message p {
            font-size: 16px;
            color: #666;
        }

    .character img {
        width: 100%; /* 让图片适应容器宽度 */
        height: auto;
        border-radius: 50%; /* 如果图片是圆形，则适用 */
    }

    .navigation {
        margin-top: 20px;
    }

        .navigation a {
            text-decoration: none;
            color: #007bff;
            font-weight: bold;
            margin: 0 10px;
        }

            .navigation a:hover {
                text-decoration: underline;
            }
</style>